- @title = 'Paginated image gallery'

#summary
  :textile
    h2. Paginated image gallery using @Ojay.Paginator@
    
    In this example we demonstrate how to use @Ojay.Paginator@ to condense a selection of
    pre-existing page content into a smaller, scrollable area, providing a GUI for the user
    to scroll between pages. The paged navigation is tracked using @Ojay.History@ so that
    individual pages of the gallery can be bookmarked.
    
    The page content simply consists of a list of twelve floated @<div class="item"></div>@
    elements, each containing a 150x100 image. Without JavaScript, they display as a 4x3
    grid according to the stylesheet. If JavaScript is enabled, the paginated interface is
    created.

:plain
    <style id="display-style" type="text/css">
        .container {
            width:          680px;
            margin:         24px auto;
        }
        
        .item {
            width:          158px;
            height:         108px;
            background:     #ccc;
            border:         4px solid #fff;
            padding:        2px;
            display:        inline;
            float:          left;
        }
        
        .item img {
            border:         4px solid #fff;
        }
        
        .paginator-controls {
            width:          680px;
            margin:         20px auto;
            text-align:     center;
        }
        
        .paginator-controls .previous,
        .paginator-controls .next,
        .paginator-controls .pages {
            display:        inline;
        }
        
        .paginator-controls .previous,
        .paginator-controls .next,
        .paginator-controls .pages span {
            border:         1px solid #ccc;
            cursor:         pointer;
            font:           bold 12px Arial, sans-serif;
            margin:         0 4px;
            padding:        2px 4px;
        }
        
        .paginator-controls .disabled {
            color:          #ccc;
            cursor:         default;
        }
        
        .paginator-controls .hovered {
            background:     #cef;
        }
        
        .paginator-controls .pages .selected {
            background:     #f30;
            border-color:   #000;
            color:          #fff;
        }
    </style>
    
    <div class="container">
        <div id="thumbnails">
            <div class="item"><img alt="" src="/images/gallery/01.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/02.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/03.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/04.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/05.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/06.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/07.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/08.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/09.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/10.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/11.jpg" /></div>
            <div class="item"><img alt="" src="/images/gallery/12.jpg" /></div>
        </div>
    </div>
    
    <script id="display-script" type="text/javascript">
        var pager = new Ojay.Paginator('#thumbnails', {
            width:      '680px',
            height:     '240px',
            direction:  'horizontal',
            scrollTime: 0.8,
            easing:     'easeOutStrong'
        });
        
        Ojay.History.manage(pager, 'gallery');
        Ojay.History.initialize({asset: '/service/hello.html'});
        
        pager.setup();
        pager.addControls('after');
    </script>